﻿<!DOCTYPE html>
<html lang="en">
<head>
@*<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>*@
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - SuperJ CMS Admin</title>
<!-- bootstrap & fontawesome -->
<link rel="stylesheet" href="~/Content/bootstrap.min.css" />
<link href="~/Content/bootstrap-theme.min.css" rel="stylesheet" />

<link href="~/Content/font-awesome.css" rel="stylesheet" />
<!-- page specific plugin styles -->
@*<link rel="stylesheet" href="../assets/css/jquery-ui.custom.min.css" />*@
<link rel="stylesheet" href="~/assets/css/chosen.css" />
<link rel="stylesheet" href="~/assets/css/datepicker.css" />
<link rel="stylesheet" href="~/assets/css/bootstrap-timepicker.css" />
<link rel="stylesheet" href="~/assets/css/daterangepicker.css" />
<link rel="stylesheet" href="~/assets/css/bootstrap-datetimepicker.css" />
<link rel="stylesheet" href="~/assets/css/colorpicker.css" />
<!-- text fonts -->
<link rel="stylesheet" href="~/assets/css/ace-fonts.css" />

<!-- ace styles -->
<link rel="stylesheet" href="~/assets/css/uncompressed/ace.css" id="main-ace-style" />

<!--[if lte IE 9]>
    <link rel="stylesheet" href="~/Content/css/ace-part2.min.css" />
<![endif]-->
<link rel="stylesheet" href="~/assets/css/ace-skins.min.css" />
<link rel="stylesheet" href="~/assets/css/ace-rtl.min.css" />

<!--[if lte IE 9]>
  <link rel="stylesheet" href="~/Content/css/ace-ie.min.css" />
<![endif]-->
<!-- inline styles related to this page -->
<!-- ace settings handler -->
<script src="~/assets/js/ace-extra.min.js"></script>

<!-- CSS **********************************************************************-->
<!--<link href="/Content/Css/jquery-ui.custom.min.css" rel="stylesheet" />-->
<link href="~/Content/themes/ace/all.css" rel="stylesheet" />
<link href="~/Content/Site.css" rel="stylesheet" />
<!-- JAVASCRIPT -->
<script src="~/Scripts/modernizr-2.8.3.js"></script>

<script src="~/Scripts/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="~/Scripts/jquery-ui.min-1.11.1.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.validate.js"></script>
<script src="~/Scripts/jquery.validate-vsdoc.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="/assets/js/jquery.ui.touch-punch.min.js"></script>

<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/assets/js/ace-elements.min.js"></script>
<script src="~/assets/js/uncompressed/ace.js"></script>

<script src="~/Scripts/Prettify/prettify.js"></script>
<script src="~/assets/js/jquery.hotkeys.min.js"></script>
<script src="~/assets/js/uncompressed/bootstrap-wysiwyg.js"></script>
<script src="~/assets/js/ace/elements.wysiwyg.js"></script>
<script src="~/assets/js/bootbox.min.js"></script>

<script src="~/Scripts/Main.js"></script>


<!--**********************************************************************-->
<!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->
<!--[if lte IE 8]>
<script src="~/Scripts/html5shiv.min.js"></script>
<script src="~/Scripts/respond.min.js"></script>
<![endif]-->


</head>
<body>
    <div>
        <div id="editor1" class="wysiwyg-editor"></div>
    </div>

    <script type="text/javascript">
    jQuery(function ($) {

        function showErrorAlert(reason, detail) {
            var msg = '';
            if (reason === 'unsupported-file-type') { msg = "Unsupported format " + detail; }
            else {
                //console.log("error uploading file", reason, detail);
            }
            $('<div class="alert"> <button type="button" class="close" data-dismiss="alert">&times;</button>' +
             '<strong>File upload error</strong> ' + msg + ' </div>').prependTo('#alerts');
        }

        //$('#editor1').ace_wysiwyg();//this will create the default editor will all buttons

        //but we want to change a few buttons colors for the third style
        $('#editor1').ace_wysiwyg({
            toolbar:
            [
                'font',
                null,
                'fontSize',
                null,
                { name: 'bold', className: 'btn-info' },
                { name: 'italic', className: 'btn-info' },
                { name: 'strikethrough', className: 'btn-info' },
                { name: 'underline', className: 'btn-info' },
                null,
                { name: 'insertunorderedlist', className: 'btn-success' },
                { name: 'insertorderedlist', className: 'btn-success' },
                { name: 'outdent', className: 'btn-purple' },
                { name: 'indent', className: 'btn-purple' },
                null,
                { name: 'justifyleft', className: 'btn-primary' },
                { name: 'justifycenter', className: 'btn-primary' },
                { name: 'justifyright', className: 'btn-primary' },
                { name: 'justifyfull', className: 'btn-inverse' },
                null,
                { name: 'createLink', className: 'btn-pink' },
                { name: 'unlink', className: 'btn-pink' },
                null,
                { name: 'insertImage', className: 'btn-success' },
                null,
                'foreColor',
                null,
                { name: 'undo', className: 'btn-grey' },
                { name: 'redo', className: 'btn-grey' }
            ],
            'wysiwyg': {
                fileUploadError: showErrorAlert
            }
        }).prev().addClass('wysiwyg-style2');


        /**
        //make the editor have all the available height
        $(window).on('resize.editor', function() {
            var offset = $('#editor1').parent().offset();
            var winHeight =  $(this).height();

            $('#editor1').css({'height':winHeight - offset.top - 10, 'max-height': 'none'});
        }).triggerHandler('resize.editor');
        */


        $('#editor2').css({ 'height': '200px' }).ace_wysiwyg({
            toolbar_place: function (toolbar) {
                return $(this).closest('.widget-box')
                       .find('.widget-header').prepend(toolbar)
                       .find('.wysiwyg-toolbar').addClass('inline');
            },
            toolbar:
            [
                'bold',
                { name: 'italic', title: 'Change Title!', icon: 'ace-icon fa fa-leaf' },
                'strikethrough',
                null,
                'insertunorderedlist',
                'insertorderedlist',
                null,
                'justifyleft',
                'justifycenter',
                'justifyright'
            ],
            speech_button: false
        });




        $('[data-toggle="buttons"] .btn').on('click', function (e) {
            var target = $(this).find('input[type=radio]');
            var which = parseInt(target.val());
            var toolbar = $('#editor1').prev().get(0);
            if (which >= 1 && which <= 4) {
                toolbar.className = toolbar.className.replace(/wysiwyg\-style(1|2)/g, '');
                if (which == 1) $(toolbar).addClass('wysiwyg-style1');
                else if (which == 2) $(toolbar).addClass('wysiwyg-style2');
                if (which == 4) {
                    $(toolbar).find('.btn-group > .btn').addClass('btn-white btn-round');
                } else $(toolbar).find('.btn-group > .btn-white').removeClass('btn-white btn-round');
            }
        });




        //RESIZE IMAGE

        //Add Image Resize Functionality to Chrome and Safari
        //webkit browsers don't have image resize functionality when content is editable
        //so let's add something using jQuery UI resizable
        //another option would be opening a dialog for user to enter dimensions.
        if (typeof jQuery.ui !== 'undefined' && ace.vars['webkit']) {

            var lastResizableImg = null;
            function destroyResizable() {
                if (lastResizableImg == null) return;
                lastResizableImg.resizable("destroy");
                lastResizableImg.removeData('resizable');
                lastResizableImg = null;
            }

            var enableImageResize = function () {
                $('.wysiwyg-editor')
                .on('mousedown', function (e) {
                    var target = $(e.target);
                    if (e.target instanceof HTMLImageElement) {
                        if (!target.data('resizable')) {
                            target.resizable({
                                aspectRatio: e.target.width / e.target.height,
                            });
                            target.data('resizable', true);

                            if (lastResizableImg != null) {
                                //disable previous resizable image
                                lastResizableImg.resizable("destroy");
                                lastResizableImg.removeData('resizable');
                            }
                            lastResizableImg = target;
                        }
                    }
                })
                .on('click', function (e) {
                    if (lastResizableImg != null && !(e.target instanceof HTMLImageElement)) {
                        destroyResizable();
                    }
                })
                .on('keydown', function () {
                    destroyResizable();
                });
            }

            enableImageResize();

            /**
            //or we can load the jQuery UI dynamically only if needed
            if (typeof jQuery.ui !== 'undefined') enableImageResize();
            else {//load jQuery UI if not loaded
                $.getScript($path_assets+"/js/jquery-ui.custom.min.js", function(data, textStatus, jqxhr) {
                    enableImageResize()
                });
            }
            */
        }


    });
    </script>
</body>

</html>
